<template>
	<view>
		<view class="content-structure-framework">
			<swiper class="swiper u-padding-30" circular :interval="1500">
				<swiper-item v-for="(v,k) in courseDetail.images_lis" :key="k">
					<image :src="v.url" mode="top" class="swiper-image" ></image>
				</swiper-item>
			</swiper>
			<view class="bg-white u-flex-1 introduction-area u-flex u-flex-col">
				<view class="u-padding-left-30 u-padding-right-30" style="width: 100%;">
					<view class="xxl u-font-weight-500 u-padding-top-30">
						{{courseDetail.title||""}}
					</view>
					<view class="sm u-color-666666 u-padding-top-10">
						{{courseDetail.synopsis||""}}
					</view>
					<view class="u-padding-top-30 u-flex ">
						<u-tag v-for="(v,k) in courseDetail.lable"  :key="k" class="u-margin-right-15" :text="v" type="success" mode="plain" />
					</view>
				</view>
				<view
					class="u-margin-top-30 open-vip-area u-margin-left-30 u-margin-right-30 u-border-radius-10 u-flex u-row-between u-col-center u-padding-25">
					<text>升级会员，平台课程免费观看</text>
					<navigator url="/pages/user_vip/user_vip" hover-class="none" class="c-665331">一键升级</navigator>
				</view>

				<view class="u-flex u-flex-col u-flex-1">
					<view :class="`u-margin-top-30 u-flex tab-area ${tab}`">
						<view class="u-flex-1 tab-item u-text-center" @click="tab = 'left'">课程介绍</view>
						<view class="u-flex-1 tab-item u-text-center" @click="tab = 'right'">课程章节</view>
					</view>
					<u-parse class="u-padding-top-15" v-if="tab == 'left'" :html="courseDetail.content||''"></u-parse>
					<view v-if="tab == 'right'" class="u-flex-1 w-100 u-padding-left-30 u-padding-right-30">
						<u-collapse>
							<u-collapse-item v-for="(v,k) in courseDetail.course_chapter" v-if="v.course_material.length > 0" :key="k">
								<template #title>
									<view class="u-padding-left-30 course-section-title">{{v.name||''}}</view>
								</template>
								<view class="course-list">
									<navigator :url="`/yixu/pages/curriculum/detail?id=${item.id}`" hover-class="none" class="course-item u-flex u-col-center u-padding-top-30 u-padding-bottom-30" v-for="(item,index) in v.course_material" :key="index">
										<!-- lock-fill lock-opened-fill -->
										<u-icon name="lock-fill" color="#CCCCCC" size="40"></u-icon>
										<view class="u-padding-left-10">
											<view class="u-line-2  u-font-weight-500 u-color-333333 md">
												第{{index + 1}}课时： {{item.title}}
											</view>
										</view>
									</navigator>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>

				<view class="footer-area u-flex u-row-between bg-white">
					<view class="u-padding-left-25 u-padding-right-25 u-text-center">
						<!-- 选择状态图标加上-fill -->
						<u-icon name="thumb-up" color="#0D6EFD" size="32"></u-icon>
						<view class="u-color-666666 xxs">点赞</view>
					</view>
					<view class="u-padding-left-25 u-padding-right-25 u-text-center">
						<!-- 选择状态图标加上-fill -->
						<u-icon name="heart" color="#0D6EFD" size="32"></u-icon>
						<view class="u-color-666666 xxs">收藏</view>
					</view>
					<view class="buy-btn u-flex-1 u-margin-left-20">
						立即订阅
					</view>
				</view>
			</view>
		</view>

		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		queryDetailDatas
	} from '@/api/course'
	export default {
		data() {
			return {
				loadingShowStatus: false,
				tab: 'left',
				courseDetail:{}
			};
		},
		onLoad(e) {
			console.log(!uni.$u.test.isEmpty(e.id))
			if(!uni.$u.test.isEmpty(e.id)){
				this.queryDetailDatasFun(e.id)
				// this.queryMaterialDetailDatasFun(e.id)
			}
		},
		methods:{
			async queryDetailDatasFun(id){
				let {
					data
				} = await queryDetailDatas({
					id
				})
				this.courseDetail = data
			}
		}
		
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: url(https://resource.lanbaozixun.com/uploads/images/202406151200573edf76650.png) no-repeat;
		background-size: 100% auto;

		.content-structure-framework {
			min-height: 100vh;

			.swiper {
				height: 428rpx;
				
				.swiper-image{
					width: 100%;
					height: 428rpx;
					border-radius: 20rpx;
				}
			}


			.introduction-area {
				border-radius: 20rpx 20rpx 0 0;
				min-height: calc(100vh - 458rpx);
			}

			.open-vip-area {
				background: #F0D3BA;
				width: calc(100vw - 60rpx);

				.c-665331 {
					color: #665331;
				}
			}

			.tab-area {
				background: #FAFAFA;
				position: relative;
				overflow-x: hidden;

				&::before {
					top: 0;
					bottom: 0;
					content: '';
					width: 60vw;
					position: absolute;
					transform: skewX(30deg);
					background-color: white;
					box-shadow: 0px -7px 20px rgba(0, 0, 0, 0.04);
				}

				&::after {
					width: 71rpx;
					height: 11rpx;
					content: '';
					bottom: 0;
					border-radius: 10rpx;
					position: absolute;
					background: #3599FC;
				}

				@keyframes slideLeftBefore {
					from {
						transform: skewX(-30deg);
						right: -10vw;
					}

					to {
						transform: skewX(30deg);
						left: -10vw;
					}
				}

				@keyframes slideLeftAfter {
					from {
						left: 0;
					}

					to {
						left: calc(25% - 35rpx);
					}
				}

				&.left {
					&::before {
						animation: slideLeftBefore 1s ease-in-out;
						animation-fill-mode: forwards;
					}

					&::after {
						animation: slideLeftAfter 1s ease-in-out;
						animation-fill-mode: forwards;
					}
				}

				@keyframes slideRightBefore {
					from {
						transform: skewX(30deg);
						left: -10vw;
					}

					to {
						transform: skewX(-30deg);
						right: -10vw;
					}
				}

				@keyframes slideRightAfter {
					from {
						right: 0;
					}

					to {
						right: calc(25% - 35rpx);
					}
				}

				&.right {
					&::before {
						animation: slideRightBefore 1s ease-in-out;
						animation-fill-mode: forwards;
					}

					&::after {
						animation: slideRightAfter 1s ease-in-out;
						animation-fill-mode: forwards;
					}
				}

				.tab-item {
					width: 50vw;
					z-index: 1999;
					padding: 25rpx 0;
					position: relative;
				}
			}
			
			.course-section-title{
				position: relative;
				
				&::before{
					content: '';
					left: 5rpx;
					height: 80%;
					width: 4rpx;
					position: absolute;
					background: #3599FC;
				}
			}

			.footer-area {
				bottom: 0;
				width: 100vw;
				position: sticky;
				box-shadow: 0px -2px 4px rgba(0, 0, 0, .25);
				padding: 20rpx 25rpx calc(20rpx - env(safe-area-inset-bottom)) 25rpx;

				.buy-btn {
					width: 40vw;
					color: white;
					padding: 25rpx 0;
					text-align: center;
					background: #0D6EFD;
					border-radius: 100rpx;
				}
			}
		}
	}
</style>